<template>
    <div class="py-20 md:py-28 px-2 text-center container m-auto flex flex-col lg:flex-row max-w-5xl">
        <div class="w-full lg:w-72 text-center flex-shrink-0 flex flex-col justify-center items-center">
            <h2 class="text-38px text-black mb-8 font-bold px-6">COCloud<br>4 大保護措施</h2>
            <img class="hidden lg:block w-full " src="../assets/images/deco.webp" alt="COCloud 4 大保護措施s">
        </div>
        <div class="flex flex-wrap mb-8 justify-center">
            <div class="p-4 text-left">
                <div class="card-box bg-white shadow-xl h-full rounded-xl p-8">
                    <h3 class="text-purple font-bold text-3xl mb-2">T 級防禦能力</h3>
                    <p class="text-black mb-3 text-justify">
                        全球七大廠合作全方位第 3 層、第 4 層、第 7 層攻擊防禦。
                    </p>
                    <p class="text-4xl font-bold text-orangeLight">3, 4, 7</p>
                </div>
            </div>
            <div class="p-4 text-left">
                <div class="card-box bg-white shadow-xl h-full rounded-xl p-8">
                    <h3 class="text-purple font-bold text-3xl mb-2">高規格清洗服務</h3>
                    <p class="text-black mb-3 text-justify">
                        實現實時防護，清洗成功率達99.995%，保障業務平穩運行。
                    </p>
                    <p class="text-4xl font-bold text-orangeLight">99.995 %</p>
                </div>
            </div>
            <div class="p-4 text-left">
                <div class="card-box bg-white shadow-xl h-full rounded-xl p-8">
                    <h3 class="text-purple font-bold text-3xl mb-2">AI 智動化防護</h3>
                    <p class="text-black mb-3 text-justify">
                        智能 Anti-DDoS 系統，全網帶寬能力高 100Tbps 以上。
                    </p>
                    <p class="text-4xl font-bold text-orangeLight">100 Tbps</p>
                </div>
            </div>
            <div class="p-4 text-left">
                <div class="card-box bg-white shadow-xl h-full rounded-xl p-8">
                    <h3 class="text-purple font-bold text-3xl mb-2">全時段技術支援</h3>
                    <p class="text-black mb-3 text-justify">
                        全球零時差在線服務，立刻舒緩並降低攻擊影響。
                    </p>
                    <p class="text-4xl font-bold text-orangeLight">24/7</p>
                </div>
            </div>
        </div>
    </div>
</template>
<style>
.card-box {
    width: 328px;
    height: 200px;
}
</style>
  